<!DOCTYPE html>
<html lang="zh">
<head>
	<title>HTML5触摸界面设计与开发</title>
	<base url="http://localhost/notebook" />
	<meta charset="utf-8" />
	<link type="text/css" rel="stylesheet" href="css/default.css" />
</head>
<body>
<article>
	<header>
		<h1>第1章 移动设备概述</h1>
	</header>
	<section>
		<p>由于移动终端的界面太小，不太可能在一个应用上等太长时间，而且，用户也不象用台式机一样，可艰暂时切换到其他软件等待，因此，不要让用户等待。Android 4.1版本开始，系统自动的浏览器换为了chrome。除Opera外，几乎所有非IE核心的浏览器都是基于WebKit的。WebKit起源于开源浏览器引擎Konqueror。</p>
		<p>鉴于触摸设备的性质，速度快是至关重要的，至少也要做到看起来非常快。</p>
	</section>
	<footer>
		<p>这一章介绍了触摸界面设备的特点及其所配备的浏览器特点——统统支持HTML5。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第2章 创建一个简单的内容型网站</h1>
	</header>
	<section>
		<p>移动优先和移动置后两个思路，即先针对移动设备设计然后通过调整使之适应桌面设备或是相反，而真正的移动优先，现在来说为时尚早。<a href="code/touch_ui/awesome.html">下面的示例</a>以移动置后方案编写，先要将文档划分区块，比如：nav标记放导航，aside标记表示桌面版侧栏或移动版顶部导航，内容使用class为main的div标记。</p>
		<p>示例代码中为li单独定义了类，而不是在CSS中以nav ul li这样的分级定义，有两个原因：一、class直接定义更容易管理，二、浏览器解释CSS时是从右向左的同，多级定义将影响效率。</p>
		<p>http-equiv元信息告诉浏览器如何去做，等效于设置了HTTP报头，但是其优先级不如服务器报头高，并不能覆盖服务器报头项。</p>
		<p>viewport元信息仅用于触摸设备，它可以指定虚拟窗口的大小，将它设置正确是非常重要的。如果不用viewport定义宽度，那么视图会默认宽度为980px的虚拟元素(即以实际象素不到980px的显示界面作为980px象素的显示器来使用），这就是页面在移动设备上显示字体偏小的原因。即用viewport的content属性定义移动终端的显示宽度，与实际象素无关。px虽然更直接，但是在移动设备上它已经无法用于精确布局，因此，使用em会更合适，1em=当前字体的X大小。下面是viewport的content属性可使用的值：</p>
		<table class="table table-bordered">
			<thead>
			<tr>
				<th>属性</th>
				<th>描述</th>
			</tr>
			</thead>
			<tbody>
			<tr>
				<td>width</td>
				<td>设备viewport的宽度。如果不设置默认为980,取值范围是200-10000。大多数情况下应当设置width=device-width</td>
			</tr>
			<tr>
				<td>height</td>
				<td>设置viewport的高度，默认值是通过宽度和设备宽高比计算出来的，取值范围是223-10000</td>
			</tr>
			<tr>
				<td>initial-scale</td>
				<td>设置viewport的初始比例。默认值是通过计算使得整个页面在可见区域内。范围由minimum-scale和maximum-scale属性决定</td>
			</tr>
			<tr>
				<td>maximum-scale</td>
				<td>设置viewport的最大比例。默认值是5.0.取值范围是0～10</td>
			</tr>
			<tr>
				<td>user-scaleable</td>
				<td>决定用户是否可以缩放视图。还可以防止在开始输入文本的时候滚动</td>
			</tr>
			</tbody>
		</table>
		<p>上例代码中的reset.css文件用于重置CSS样式。因为从“重置”后完全清洁的环境开始，要优于不停地尝试修改兼空浏览器默认的样式。下图是重置后的样式：</p>
		<img src="images/reset_css.png" />
		<p>下图是应用新的CSS后的林式：</p>
		<img src="images/setcss.png" />
		<p>在响应式布局中，多用CSS类来装载子元素，并将此类置于作为容器的CSS类中，以百分比来定义其宽高，这样实现元素的自适应。</p>
		<p>自CSS2开始，link标记就可以在定义CSS样式的时候定义媒体查询，为不同的终端定义不同的样式表。比如下面的两行代码定义了同一个文档在屏幕显示、打印机上分别采用的CSS样式：</p>
		<pre>
			&lt;link rel="stylesheet" media="screen" href="default.css" &gt;
			&lt;link rel="stylesheet" media="print" href="print.css" &gt;
		</pre>
		<p>CSS3提供了更强大的语法，可以根据更多的条件过滤样式表，而不只是终端类型。媒体查询由一个媒介类型和其他表达式组成。解析后，媒体查询最终结果为真的样式表将被应用。媒体查询表达式可由布尔运算符开始，比如：NOT，这样相当于逻辑表达式的取反。也可以用only操作符开始，由于旧浏览器无法解析only，因此，这可以有效地屏蔽那些只能应用于现在浏览器上的特效，条件之间用逻辑运算符and或or连接，比如：</p>
		<pre>
			&lt;link rel="stylesheet" media="only screen and (max-width: 800px)" href="default.css" &gt;
		</pre>
		<p>甚至，还可以在样式表定义中，用@media来指定特殊的条件样式。比如：</p>
		<pre>
			@media only screen and (max-width: 800px)
			{
				/* CSS that applies only in this case */
			}
		</pre>
		<p>关于媒体查询的具体介绍可参照<a href="https://developer.mozilla.org/en-us/docs/Css/Media_queries">Mozilla 开发网络</a>上的介绍。<a href="reference/media_queries.html">可从本地看到此文件，以后再译。</a> </p>
	</section>
	<footer>
		<p>这一章介绍了响应式布局，主要关键字是viewport,只需定义其值为width=device-width即可。link下面的media属性以及在CSS中使用@media结合only max-width等值来定义不同设备下的显示效果。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第3章 提高第一次加载的速度</h1>
	</header>
	<section>
		<p>DNS醒找机制会被浏览器、设备及设备和服务器之间的路由器和代理服务器缓存。每个外链资源都需要一个HTTP请求，因此连续不断地请求多个小文件会比一次请求一个大文件慢很多。虽然浏览器可以并行下载多个任备，但两个文件并行下载的速度并不等于串行下载速度的两倍，创建新请求不仅会产生新开溜须还要耗费CPU和内存。一个链接对应一个请求是由HTTP的特点决定的。Google开发了SPDY协议,可以用一个链接对应多个下载资源。</p>
		<p>script标签会阻塞后续的HTML渲染，要一直等它下载完成后才会继续加载网页，因此一般将它放在网页的末尾最后载入。另外，为了提高效率，可以将针对不同设备的CSS文件合并，使用@media关键字，取代link标签定义。要注意节省用户流量，减少大图片的应用，为此，在给移动端定义的CSS中使用div的class属性定义背景图片的方式来取代img标签显示图片。</p>
	</section>
	<footer>
		<p>将样式合并，JavaScript置于底部，优化图像（分类下载）。这样可以提升访问速度和体验。这一节讲的这些很简单。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第4章 加快下一次访问的速度</h1>
	</header>
	<section>
		<p>移动终端的浏览器缓存是很小的，大部分都会在关闭浏览器时清空，因此不需要考虚用缓存来加速再次访问的速度。另外，对于内容经常变更的网站也不要使用这种技术，相反，要避免因为缓存让用户得不到最新的数据。</p>
	</section>
	<footer>
		<p>后面介绍了利用JavaScript操纵网络存储API和终端的APP缓存，个人认为缓存技术不是很有用。略过。</p>
	</footer>
</article>
<article>
	<header>
		<h1>第5章 使用PJAX提升触摸体验</h1>
	</header>
	<section>
		<p>这一章总算有了点触摸相关的内容，但是主要针对JavaScript编码，这本书名不符实。</p>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第6章 轻触VS单击：基本的事件处理</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第7章 CSS过渡、动画和变换</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第8章 JavaScript性能最优化</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第9章 手势的基本内容</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第10章 滚动与滑动</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
<article>
	<header>
		<h1>第11章 双指缩放和其他复杂的手势</h1>
	</header>
	<section>
	</section>
	<footer>
		<p></p>
	</footer>
</article>
</body>
</html>